<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\Design;
use common\models\Category;

$this->addCrumbs('作品管理');
$this->title = $design ? '修改作品信息' : '发布作品';
?>
<style>
    #uploader {width:auto;height:auto;min-height:388px;}
    #uploader .file-picker {width:100%;height:388px;}
    #uploader .file-dispose {width:100%;height:auto;}
    #uploader .loader-content {position:relative;margin-top:-388px;}
</style>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'design']) ?>

    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form">
                <form class="mt-20px" id="flyer-create" enctype="multipart/form-data" onsubmit="return false;">
                    <div class="form-item checker">
                        <div class="input-title">标题：</div>
                        <div class="input-block"><input class="flyer-input" name="title" type="text" value="<?= Render::value($design, 'title') ?>"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">设计类目：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('category_id', $categories, Render::value($design, 'category_id'), [], ['value' => 'id']) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">设计类型：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('model', $models, Render::value($design, 'model'), [], ['value' => 'id']) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">设计风格：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('style', Design::$styleSelector, Render::value($design, 'style')) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">上线平台：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('platform', Design::$platformSelector, Render::value($design, 'platform')) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">上线设备：</div>
                        <div class="input-block flyer-choise-conter moderate red-choise"><?= Render::radio('device', Design::$deviceSelector, Render::value($design, 'device')) ?></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">缩略图：</div>
                        <div class="input-inline" id="thumb"></div>
                        <div class="input-inline input-mid cl-red">
                            <p>大小不超过100KB</p>
                            <p>推荐尺寸：380px * 400px</p>
                        </div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title">作品图片：</div>
                        <div class="input-block" id="uploader"></div>
                    </div>
                    <div class="form-item checker">
                        <div class="input-title"></div>
                        <div class="input-inline"><button class="flyer-button normal border-round" id="save-button" type="submit">保 存</button></div>
                    </div>
                    <textarea id="flyer-create-json" data-form="#flyer-create" style="display:none;"><?= Design::checker() ?></textarea>
                    <input type="hidden" name="_csrf" value="<?= Yii::$app->request->getCsrfToken() ?>">
                </form>
            </div>
        </div>
    </div>
</div>

<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<!-- 图片上传功能插件引入 -->
<link href="<?= Render::static('uploader/loader.css') ?>" rel="stylesheet">
<script src="<?= Render::static('uploader/loader.core.single.class.js') ?>"></script>
<script src="<?= Render::static('uploader/loader.preview.class.js') ?>"></script>
<script>
    var checkerClass = new checker();
    $(document).ready(function() {
        // 类型选择
        $('input[name=type][value=<?= Render::value($design, 'type') ?>]').click();
        // 表单美化
        (new flyer).init({ form: '#flyer-create' });

        // 初始化 微信二维码上传插件
        (new loaderPerview).init({
            conter: '#thumb', name: 'thumb',
            prevLoaders: "<?= Render::upload(Render::value($design, 'thumb')) ?>"
        });
        // 初始化 微信二维码上传插件
        (new loaderPerview).init({
            conter: '#uploader', name: 'image',
            prevLoaders: "<?= Render::upload(Render::value($design, 'image')) ?>"
        });

        // 表单数据验证
        checkerClass.init({ ruleDom: '#flyer-create-json' });

        $('#save-button').bind('click', function() {
            if(checkerClass.validate()) {
                $('#save-button').attr('disabled', true).html('保存中');
                $.ajax({
                    url: "<?= Url::to('@web/designer/design?id=').Render::value($design, 'id') ?>",
                    cache: false,
                    data: new FormData($('#flyer-create')[0]),
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    success: function(response) {
                        if(response.code == 200) {
                            layer.alert('作品保存成功', { icon: 6 }, function() {
                                window.location.href = "<?= Url::to('@web/designer/design-list') ?>";
                            });
                        }
                        else {
                            layer.msg(response.message, { shift: 6 });
                        }
                        $('#save-button').removeAttr('disabled').html('保存');
                    }
                });
            }
        });
    });
</script>